<template>
	<view>
		<view style="text-align: center; margin-top: 100px;">
			<image :src="iconFilePath" @click="updateImage()" mode="aspectFill"
				style="width: 200rpx; height: 200rpx; border-radius: 50%; overflow: hidden;">
			</image>
		</view>
		<view
			style="margin-top: 50rpx; text-align: center; display: flex; flex-direction: column; align-items: center;">
			<button @click="chooseImage">选择图片显示</button>
			<button @click="previewImage(choosedImags)" style="margin-top: 20rpx;">预览图片</button>
			<button @click="getImageInfo" style="margin-top: 20rpx;">获取图片信息</button>
		</view>
		<view style="margin-top: 30rpx; padding: 20rpx; text-align: center;">
			<view v-if="imageInfo">
				<view>宽度：{{ imageInfo.width }}px</view>
				<view>高度：{{ imageInfo.height }}px</view>
				<view>格式：{{ imageInfo.type }}</view>
				<view>路径：{{ imageInfo.path }}</view>
			</view>
			<view v-else>请选择图片后获取信息</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				iconFilePath: "/static/logo.png",
				choosedImags: [],
				imageInfo: null 
			}
		},
		methods: {
			updateImage() {
				uni.chooseImage({
					count: 6,
					sourceType: ['album'],
					success: (res) => {
						this.iconFilePath = res.tempFilePaths[0];
						this.choosedImags = res.tempFilePaths;
					}
				});
			},
			chooseImage() {
				uni.chooseImage({
					success: (res) => {
						this.choosedImags = res.tempFilePaths;
						this.iconFilePath = res.tempFilePaths[0];
					}
				});
			},
			previewImage(images) {
				uni.previewImage({
					urls: images
				})
			},
			getImageInfo() {
				if (!this.iconFilePath) {
					uni.showToast({
						title: '请先选择图片',
						icon: 'none'
					});
					return;
				}
				uni.getImageInfo({
					src: this.iconFilePath,
					success: (info) => {
						this.imageInfo = info;
						console.log('图片信息：', info);
					},
					fail: (err) => {
						uni.showToast({
							title: '获取图片信息失败',
							icon: 'none'
						});
						console.error('获取图片信息失败：', err);
					}
				});
			}
		}
	}
</script>

<style>
	button {
		width: 500rpx;
		height: 80rpx;
	}
</style>